<template>
  <div class="detail" v-if="detail">
    <div class="qin">
      <div id="toubu"><span @click="go0ff()">< 返回</span>详情页</div>
    </div>
    <van-image width="100%" height="300" :src="detail.coverImg" />
    <p>￥{{ detail.price }}</p>
    <h3>{{ detail.name }}</h3>
    <div id="app">
      <div class="input-num">
        <span> 数 量 ：</span>
        <button @click="sub" id="jian">-</button>
        <span>{{ num }}</span>
        <button @click="add">+</button>
      </div>
    </div>
    <van-button type="primary" size="large" @click="addcart(detail._id, num)"
      >加入购物车</van-button
    >
  </div>
</template>

<script>
import Header from "@/components/header";
import { getIdShop } from "@/api/detail";
import { addCart } from "@/api/cart";
export default {
  data() {
    return {
      detail: null,
      num: 1,
    };
  },
  computed: {},
  watch: {},

  methods: {
    //返回上一页
    go0ff() {
      if (window.history.length <= 1) {
        this.$router.push({ path: "/" });
        return false;
      } else {
        this.$router.go(-1);
      }
    },
    //加减数量
    add: function () {
      if (this.num > 0 || this.num == 1) {
        this.num++;
      }
    },
    sub: function () {
      //console.log('sub');
      if (this.num < 0 || this.num == 1) {
        //当num小于0或者num等于1时让num的值等于1
        alert("减不动了");
      } else {
        this.num--;
      }
    },
    goback() {
      this.$router.go(-1);
    },
    // 获取详情
    async loadDetail(id) {
      const result = await getIdShop(id);
      console.log(result);
      this.detail = result;
    },
    // 添加购物车
    async addcart(id, num) {
      const result = await addCart({
        quantity: num,
        product: id,
      })
        .then((res) => {
          console.log(res);
          let a = confirm("加入成功，是否跳转到购物车");
          if (a == true) {
            this.$router.push("/cart");
          }
        })
        .catch((err) => {
          alert("请先注册登录");
          this.$router.push("/login");
        });
    },
  },
  created() {
    //   一般在created生命周期获取参数
    const id = this.$route.params.id;
    this.loadDetail(id);
  },
  mounted() {},
  components: {
    Header, // 组件注册进来
  },
};
</script>
<style scoped>
.qin {
  width: 100%;
  height: 50px;
  background: white;
}
#toubu {
  width: 100%;
  height: 50px;
  text-align: center;
  font-size: 16px;
  line-height: 50px;
  position: relative;
}
#toubu > span {
  position: absolute;
  font-size: 14px;
  line-height: 50px;
  color: blue;
  left: 10px;
}

h3 {
  height: 80px;
  padding-top: 20px;
  line-height: 30px;
  font-weight: 700;
  text-align: center;
  font-size: 20px;
}
p {
  color: red;
  font-size: 20px;
  text-align: center;
  padding-top: 10px;
}
.vant-field {
  margin-left: 80px;
}
#app {
  width: 210px;
  height: 60px;
  margin: 0 auto;
  margin-bottom: 10px;
}
span {
  font-size: 23px;
  line-height: 60px;
}
.input-num > button {
  width: 20px;
  height: 40px;
  font-size: 20px;
  border: none;
  margin-left: 25px;
  background-color: #fff;
}
#jian {
  margin-left: 0;
  margin-right: 25px;
}
</style>
